import {
  ActionType,
  PageContainer,
  ProColumns,
  ProTable,
} from '@ant-design/pro-components';
import { useRef, useState } from 'react';
import DeptForm, { DeptInfo } from './components/deptForm';
import { deleteDept, queryDeptList } from '@/services/system/SystemController';
import OptionBar from '@/components/OptionBar';

export default function Page() {
  const [id, setId] = useState<number | null>(null);
  const [p_id, setPId] = useState<number | null>(null);
  const actionRef = useRef<ActionType>();
  const columns: ProColumns<DeptInfo>[] = [
    { title: '部门名称', dataIndex: 'dept_name' },
    { title: '排序', dataIndex: 'order_num', width: '10%' },
    {
      title: '状态',
      dataIndex: 'status',
      width: '15%',
      valueEnum: {
        true: { text: '启用', status: 'Success' },
        false: { text: '停用', status: 'Error' },
      },
    },
    {
      title: '创建时间',
      hideInSearch: true,
      valueType: 'dateTime',
      dataIndex: 'created_at',
      width: "10rem",
      responsive: ['md'],
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      width: "20%",
      render: (_, record) => <OptionBar
        onAdd={() => { setId(0); setPId(record.dept_id) }}
        onUpdate={() => setId(record.dept_id)}
        onDelete={async () => {
          deleteDept(record.dept_id)
          actionRef.current?.reload();
        }} />
    },
  ];

  return (
    <PageContainer breadcrumbRender={false}>
      <ProTable
        actionRef={actionRef}
        columns={columns}
        rowKey="dept_id"
        search={false}
        options={{ setting: false, density: false }}
        request={queryDeptList}
        defaultSize='small'
      />

      <DeptForm
        id={id}
        p_id={p_id}
        onClose={() => {
          setId(null);
        }}
        onFinish={() => {
          setId(null);
          actionRef.current?.reload();
        }}
      ></DeptForm>
    </PageContainer>
  );
}
